<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <hello-world></hello-world>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        /* 组件注册 */
        // Vue.component('button-counter',{
        //     data:function(){
        //         return{
        //             count:0
        //         }
        //     },
        //     template:'<button @click="handle">点击了{{count}}次</button>',
        //     methods: {
        //         handle:function(){
        //             this.count++;
        //         }
        //     },
        // });
        //-----------------------------------------
           Vue.component('button-counter', {
                data: function () {
                    return {
                        count: 0
                    }
                },
                template: `
                    <button @click='handle'>
                        {{count}}
                    </button>
                
                `,
                methods: {
                    handle: function () {
                        this.count++;
                    }
                },
            });

        var HelloWorld = {
            data:function(){
                return {
                    msg:'helloworld liuqi'
                }
            },
            template:'<div>{{msg}}</div>'
        }
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    
                }
            },
            components:{
                HelloWorld
            }
        })
    </script>
</body>
</html>